<template>
	<!-- navbar -->
	<CpNavBar>
		<template v-slot:center>
			发布
		</template>
	</CpNavBar>
	<view class="user_page">
		<!-- 登录模块 -->
		<view class="login">
			<!-- 头像 -->
			<view class="head_img" bind:tap="login">
			  <image :src="userInfo.avatarUrl" mode="widthFix"/>
			</view>
			<!-- 昵称 -->
			<view class="nickname"></view>
			<view style="color: gray;font-size: 22rpx;text-align: center;">欢迎加入云贴:<text style="font-weight: bold;">{{ userInfo.nickName }}</text></view>
		</view>
		<!-- 功能 -->
		<view class="list">
			<up-grid
				:border="false"
				@click="chooseItem"
			>
				<up-grid-item
					v-for="(baseListItem,baseListIndex) in baseList"
					:key="baseListIndex"
				>
					<up-icon
						:name="baseListItem.name"
						:size="28"
					></up-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</up-grid-item>
			</up-grid>
		</view>
	</view>
	<CpTabBar></CpTabBar>
</template>

<script setup>
	import { useTabbarStore } from '@/store/index.js'
	import { ref, onMounted } from 'vue'
	import { useUserStore } from '@/store'
	import { FileUrl } from '@/utils/FileUrl.js'
	
	const userStore = useUserStore()
	const userInfo = ref({
		avatarUrl: '1111',
		nickName: '默认用户'
	})
	// 获取用户的信息
	const user = async () => {
		const res = await userStore.getUserInfo()
		uniCloud.getTempFileURL({ 
			fileList: [res.avatarUrl],
			success: (result) => {
				res.avatarUrl = result.fileList[0].tempFileURL
				console.log(res);
				userInfo.value = res
			}
		})
	}
	// content
	const baseList = ref([  
	    {  
	        name: 'photo',  
	        title: '帖子'  
	    },  
	    {  
	        name: 'lock',  
	        title: '开发'  
	    },  
	    {  
	        name: 'lock',  
	        title: '开发'  
	    },  
	]); 
	const chooseItem = (id) => {
		console.log(id);
		if(id === 0){
			uni.navigateTo({
				url: '/pages/user/user-post/user-post',
				animationType: 'pop-in',
				animationDuration: 1000
			})
		}
	}
	const deletePost = async () => {
		const res = await uniCloud.callFunction({
			name: 'delete-post'
		})
		console.log(res);
	}
	onMounted(() => {
		user()
	})
	// tabbar
	const tabbarStore = useTabbarStore()
	tabbarStore.setActive(3)
	uni.hideTabBar()
</script>

<style lang="scss" scoped>
	.clearBtn{background-color: #fff;margin: 0;padding: 0;}
	.clearBtn::after{position: unset !important;border: unset;}

	.user_page .login{display: flex;flex-direction: column;align-items: center;background-color: #fff;border-radius: 0 0 40rpx 40rpx;padding: 60rpx 0;}
	.user_page .head_img{width: 200rpx;height: 200rpx;background-color: #fff;border-radius: 50%;overflow: hidden;display: flex;justify-content: center;align-items: center;box-shadow: rgba(0, 0, 0, 0.1) 0px 10rpx 15rpx 0px;}
	.user_page .head_img image{width: 100%;height: auto;padding: 0rpx;}
	.user_page .nickname{font-size: 40rpx;margin: 30rpx 0 0rpx;font-weight: bold;}  
	
	.list{background-color: #fff;margin-top: 50rpx;padding-top: 30rpx;}
	
	.grid-text {
	        font-size: 28rpx;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
</style>
